SERVER_HTML_TEMPLATE = '''
<!DOCTYPE html> 
<html>
    <head>
        <title>ANSA REST</title>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/ace.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.4/mode-json.js"></script>

        <style>{materialize_css}</style>
        <style>
        
            /* MATERIALIZE THEME*/
            .dark-primary-color    {{ background: #263238; }}
            .default-primary-color {{ background: #455A64; }}
            .light-primary-color   {{ background: #90A4AE; }}
            .accent-color          {{ background: #00B0FF; }}
            .accent-light          {{ background: #40C4FF; }}
            .accent-tint           {{ background: #33C0FF; }}
            .accent-shade          {{ background: #009EEB; }}
            .accent-button       {{ background: #00B0FF; box-shadow: 0px 1px 0px #33C0FF inset, 0px -1px 0px #009EEB inset, 0px 0px 5px rgba(0, 0, 0, 0.5); }}

            .center-items-flex {{
                display:flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }}

            .main-container {{
                margin:auto;
                width: 75%;
            }}

            body {{
                color:#e1e1e1;
                min-height: 100vh;
                padding: 0;
                margin: 0;
                background: linear-gradient(to bottom, #000 0%, #1a2028 50%, #293845 100%);
            }}

            .btn, .btn-large, .btn-small {{
                background-color: #2e8aca;
            }}

            .btn:hover, .btn-large:hover, .btn-small:hover {{
                background-color: #2e45a8;
            }}

            .btn:focus, .btn-large:focus, .btn-small:focus, .btn-floating:focus {{
                background-color: #2e45a8;
            }}

            button:focus {{
                background-color: #2e45a8;
            }}

            .border-slight-blue {{
                border: 1px solid #2786c74d;
            }}

        </style>
    </head>

    <body >

        <div class="main-container">

            <!-- HEADER -->
            <div style="display:flex; flex-direction: column; align-items:center; padding-top: 35px;">
                <a href="https://www.lasso.de">
                    <img src="" />
                </a>
                <h2 style="margin-left: 1em;">ANSA Rest Server</h2>
            </div>

            <hr>

            <!-- INFO -->
            <p>
                <h4>Server Info:</h4>

                <table style="width: unset;">
                    <tr>
                        <td>Address</td>
                        <td><a href="{address}">{address}</a></td>
                    </tr>
                    <tr>
                        <td>Address for Rest API (POST)</td>
                        <td><a href="{address_run}">{address_run}</a></td>
                    </tr>
                    <tr>
                        <td>Shutdown service</td>
                        <td><a href="{address_shutdown}">{address_shutdown}</a></td>
                    </tr>
                </table>
            </p>

            <hr>

            <p>
                <h4>Testing:</h4>
                <p>
                    Test section for running an ANSA function through REST:
                </p>

                <div style="display:flex; flex-direction: row; min-height:600px;">
                        <div id="editor" class="border-slight-blue" style="flex:1; margin-right: 1rem;">{{
    "function_name": "ansa.base.CreateEntity",
    "args": [
    ],
    "kwargs": {{
        "deck": 1,
        "element_type": "POINT"
    }}
}}</div>
                        <button style="margin: auto;" class="btn" onclick="onButtonSend()">
                            Send
                        </button>
                        <div class="border-slight-blue" id="editor-response" style="flex:1; margin-left: 1rem;"></div>

                </div>
            </p>

        </div>


        <!-- MATERIALIZE -->
        <script>{materialize_js}</script>
        <!-- EDITOR -->
        <script>
            ace.config.set('basePath', 'hihihi')

            // editor for the input
            document.getElementById("editor").style.fontSize='1.1rem';
            let editor = ace.edit("editor");
            editor.setTheme("ace/theme/monokai");
            editor.session.setMode("ace/mode/json");
            editor.getSession().setTabSize(2);
            editor.getSession().setUseWrapMode(true);

            // editor for the response
            document.getElementById("editor-response").style.fontSize='1.1rem';
            let editorResponse = ace.edit("editor-response");
            editorResponse.setTheme("ace/theme/monokai");
            editorResponse.session.setMode("ace/mode/json");
            editorResponse.getSession().setTabSize(2);
            editorResponse.getSession().setUseWrapMode(true);

            // for run requests
            let xhttp = new XMLHttpRequest();

            // what happens if we receive something?
            xhttp.onreadystatechange = function() {{
                if (this.readyState == 4 && this.status == 200) {{
                    console.log("Receiving",this.responseText);
                    // editor_response.set(JSON.parse(this.responseText));
                    try {{
                        const data = JSON.parse(this.responseText);
                        const niceJson = JSON.stringify(data, null, "  ");
                        editorResponse.setValue(niceJson);
                    }} catch (error) {{
                        editorResponse.setValue(this.responseText);
                    }}
                    editorResponse.gotoLine(0);
                }}
            }};

            // triggers the send function
            function onButtonSend(){{
                xhttp.open("POST", "{address_run}", true);
                xhttp.setRequestHeader("Content-type", "application/json");
                xhttp.send(editor.getValue());
            }}
        </script>
    </body>
</html>
'''